@extends("base.base")
@section("main")
    @include("Commodity.header")
    <style>
        .new-address {
            position: static;
            width: 94vw;
            margin: 0 auto;
            margin-top: 25rem;
            height: 7vh;
            border-radius: .5rem;
            border: 0.1rem solid #ba3b3f;
            color: #ba3b3f;
            line-height: 7vh;
        }
        .title{
            font-size: 1.8rem;
            line-height: 8vh;
        }
        hr.style-five {
            margin: 0;
            height: 0; /* Firefox... */
            border: 0.1rem solid #ba3b3f;
            box-shadow: 0 0 0.5rem .1rem #ba3b3f;
        }

        .address-list {
            min-height: 89vh;
            background: #ffffff;
        }

        .address-li {
            width: 90vw;
            margin: 2vh auto;
            height: 12vh;
            display: block;
            border-bottom: 0.1rem solid #d9d9d9;
        }

        .address-table {
            width: 100%;
            height: 100%;
            text-align: left;
        }

        .tr1 {
            font-size: 1.6rem;
        }

        .tr2 {
            vertical-align: top;
        }

        .td-left {
            width: 20%;
        }

        .td-center {
            width: 70%;
        }

        .address-info {
            font-size: 1.2rem;
            color: #666666;
        }

        .address-default {
            display: inline-block;
            border: 0.1rem solid #b4282d;
            padding: 0.1rem 0.3rem;
            color: #b4282d;
            border-radius: 0.3rem;
            line-height: 1;
            font-size: 1.2rem;
        }

        .td-right {
            text-align: center;
        }

        .address-trash {
            font-size: 2rem;
        }
    </style>
<main id="main" class="main">
    {{--<div class="title">地址管理</div>--}}
    {{--<hr class="style-five">--}}

    <div id="address-list" class="address-list">
        <ul class="address-ul">
            @foreach($address as $key => $value)
                <li class="address-li" data-address-id="{{$value["user_address_id"]}}">
                    <table class="address-table">
                        <tr class="tr1">
                            <td class="td-left">{{$value["get_name"]}}</td>
                            <td class="td-center">{{$value["phone"]}}</td>
                            <td class="td-right"></td>
                        </tr>
                        <tr class="tr2">
                            <td class="td-left">@if($value["is_default"])<span class="address-default">默认</span>@endif
                            </td>
                            <td class="td-center"><p class="address-info">{{$value["address"]}}</p></td>
                            <td class="td-right">
                                <i class="fa fa-trash-o address-trash"
                                   data-address-id="{{$value["user_address_id"]}}" aria-hidden="true"></i>
                            </td>
                        </tr>
                    </table>
                </li>
            @endforeach
        </ul>
        <a href="/user/address/add">
            <div id="new-address" class="new-address">
                新建地址
            </div>
        </a>
    </div>

</main>
<script>
    loading.hide()
    $(".address-trash").click(function () {
        loading.show()
        var th = $(this)
        var id = th.attr("data-address-id")
        var data = {
            _token: csrf_token,
            id: id
        }
        $.post("/api/delete_user_address", data, function (e) {
            if (e.errorCode == 0) {
                window.location.reload()
            } else {
                alert(e.errorMsg)
            }
            loading.hide()
        })
    })
</script>
@endsection